<template>
    <div class="cockpit top">
        <div class="cascader-list">
            <div class="picker mr-30">
                <el-date-picker
                    v-model="year"
                    type="year"
                    popper-class="pop-select"
                    value-format="yyyy"
                    :clearable="false"
                    placeholder="  请选择年"
                    @change="changeYear"
                >
                </el-date-picker>
            </div>
            <el-cascader
                class="cascader"
                v-model="cockpitVal"
                :show-all-levels="false"
                popper-class="pop-select"
                :props="props"
                :options="defaultNodes"
                @change="changeCascader"
            ></el-cascader>
        </div>
        <div class="center">
            <div class="circle"></div>
            <div class="circle-center">
                <div class="flex-c">
                    <span>{{ title }}</span>
                </div>
            </div>
            <div
                class="item"
                v-for="(item, i) of manageList"
                :key="i"
                :class="[`item-${i}`]"
                @click="handleManage(item)"
            >
                <div class="item-t">
                    <span>{{ item.text }}</span>
                    <div class="ft-40">{{ item.yjCount }}</div>
                    <!-- <dv-digital-flop :textAlign="'left'" class="digital" style="width:100%;height:50px;font-family: electronicFont;text-align: left;font-size: 30px;" :config="item.yjCount" /> -->
                    <span>{{ item.subText }}</span>
                    <div class="ft-40">{{ item.clAllCount }}</div>
                </div>
                <div class="item-b margin-t-10">
                    <p>{{ item.name }}</p>
                </div>
            </div>
        </div>
        <!-- 各处部门 -->
        <div class="swiper">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div
                        class="swiper-slide flex item"
                        v-for="(item, i) in branchList"
                        :key="i"
                    >
                        <div class="item-l" v-show="item.name">
                            <span
                                :class="item.name.length > 7 ? 'pt-10' : ''"
                                >{{ item.name }}</span
                            >
                            <img :src="imgSrc" alt="" />
                        </div>
                        <div class="item-r pl-20 flex-column" v-show="item.num">
                            <div class="item-r-t">{{ item.num }}</div>
                            <div class="item-r-b fs-14">
                                {{ item.text }}
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
                <!-- 如果需要滚动条 -->
                <div class="swiper-scrollbar"></div>
            </div>
        </div>
        <com-dialog
            ref="dialogRef"
            :dialogVisible="dialogVisible"
            :dialogTitle="dialogTitle"
            @closeDialog="closeDialog"
            :width="'66%'"
        ></com-dialog>
    </div>
</template>

<script>
// import bus from '@/config/bus.js';
import {
    queryCate,
    queryDetailList,
    getPointInfoCount,
    getTotalNum,
    getCollegeList
} from '@/api/cockpit.js';
import { getAllOrganize } from '@/api/systemManage';

// import { getUserAllRoles } from '@/api/systemManage.js'
// 引入swiper
import Swiper from 'swiper/js/swiper';
import 'swiper/css/swiper.min.css';
import { getStorage } from '../../../dosm-front-new/src/config/utils';
import { mapState } from 'vuex';
const currentYear = new Date().getFullYear().toString();
// let currentLevelOptions = []
// console.log(currentYear);
function formatter (number) {
    const numbers = number
        .toString()
        .split('')
        .reverse();
    const segs = [];

    while (numbers.length) segs.push(numbers.splice(0, 3).join(''));

    return segs
        .join(',')
        .split('')
        .reverse()
        .join('');
}
export default {
    data () {
        const self = this;
        return {
            options: [],
            cockpitVal: [],
            indexCode: 'zlzx',
            defaultNodes: null,
            props: {
                // checkStrictly: true,
                lazy: true,
                lazyLoad (node, resolve) {
                    const { level, value, path } = node;
                    console.log(node, 'node');
                    if (level === 0) {
                        queryCate({
                            userId: getStorage('userInfo').id,
                            nd: currentYear,
                            pageIndex: 1,
                            pageSize: 100
                        }).then(res => {
                            console.log(res, 'level');
                            res.map(item => {
                                item.value = item.dashboardCode;
                                item.label = item.dashboardName;
                                item.leaf = level > 0;
                            });
                            console.log(res, 'queryCate');
                            resolve(res);
                            // self.getDetailList(res[0].value, level, resolve)
                        });
                    }
                    if (level === 1) {
                        // self.getDetailList(value, level, resolve)
                        self.indexCode = value;
                        self.$store.commit('cockpit/SET_PARAMS', {
                            year: self.year,
                            indexCode: value
                        });
                        console.log(currentYear, 'level1');
                        queryDetailList({
                            userId: getStorage('userInfo').id,
                            nd: currentYear,
                            dashboardCode: value,
                            pageIndex: 1,
                            pageSize: 1000
                        }).then(res => {
                            res.map(child => {
                                child.value = child.dashboardDetailCode;
                                child.label = child.dashboardDetailName;
                                child.leaf = level > 0;
                            });
                            resolve(res);
                            console.log(res, 'queryDetailList');
                        });
                    }
                    if (level === 2) {
                        return resolve();
                    }
                }
            },
            year: currentYear,
            title: '诊改办驾驶舱',
            manageList: [],
            branchList: [],
            dialogVisible: false,
            dialogTitle: '',
            level: 0,
            isShow: false,
            imgSrc: null
        };
    },
    computed: {
        ...mapState({
            code: state => state.cockpit.code,
            // year: state => state.cockpit.year,
            stateVal: state => state.cockpit.stateVal
        })
    },
    created () {},
    mounted () {
        this.init();
    },
    methods: {
        getDetailList (value, level, resolve) {
            this.indexCode = value;
                        this.$store.commit('cockpit/SET_PARAMS', {
                            year: this.year,
                            indexCode: value
                        });
                        console.log(currentYear, 'level1');
                        queryDetailList({
                            userId: getStorage('userInfo').id,
                            nd: currentYear,
                            dashboardCode: value,
                            pageIndex: 1,
                            pageSize: 1000
                        }).then(res => {
                            res.map(child => {
                                child.value = child.dashboardDetailCode;
                                child.label = child.dashboardDetailName;
                                child.leaf = level > 0;
                            });
                            resolve(res);
                            console.log(res, 'queryDetailList');
                        });
        },
        init () {
            this.getTotal();
            this.getOptions();
            this.pointInfoCount();
            this.getBelongPart();
        },
        getBelongPart () {
            getAllOrganize().then(res => {
                this.$store.commit('cockpit/SET_BELONGPART', res);
            });
        },
        getOptions () {
            getCollegeList().then(res => {
                this.$store.commit('cockpit/SET_COLLEGELIST', res);
            });
            queryDetailList({
                userId: getStorage('userInfo').id,
                dashboardCode: 'cm',
                pageIndex: 1,
                pageSize: 100
            }).then(res => {
                this.$store.commit('cockpit/SET_LEVELOPTION', res);
            });
        },
        // 级联
        changeCascader (val) {
            console.log(val, '-val-');
            this.$store.commit('cockpit/SET_INDEXCODE', val[0]);
            if (val.length < 2) {
                this.$store.commit('cockpit/SET_CODE', null);
            }
            val.length > 1 &&
                this.$store.commit(
                    'cockpit/SET_CODE',
                    val[1] === 'zlzx' ? null : val[1]
                );
            this.indexCode = val[0];
            if (val[0] === 'zlzx') {
                this.title = '诊改办驾驶舱';
                this.level = 0;
            }
            if (val[0] === 'cm') {
                this.title = '层面驾驶舱';
                this.level = 1;
            }
            if (val[0] === 'jxdw') {
                this.title = '教学单位驾驶舱';
                this.level = 2;
            }
            if (val[0] === 'jys') {
                this.title = '教研室驾驶舱';
                this.level = 3;
            }
            if (val[0] === 'bzr') {
                this.title = '班主任驾驶舱';
                this.level = 4;
            }
            if (val.length > 1) {
                this.getTotal();
                this.pointInfoCount();
            }
        },
        // 年份
        changeYear (val) {
            this.$store.commit('cockpit/SET_YEAR', val);
            this.getTotal();
            this.pointInfoCount();
        },
        pointInfoCount () {
            const params = {
                year: this.year,
                code: ['cm'].includes(this.indexCode) ? this.code : null,
                orgId: ['jxdw', 'jys', 'bzr'].includes(this.indexCode)
                    ? this.code
                    : null,
                level: this.level,
                pageIndex: 1,
                pageSize: 10
            };
            getPointInfoCount(params).then(res => {
                console.log(res, 'data==');
                res.map(item => {
                    item.text = '质控点数量';
                });
                this.branchList = res || [];
            });
        },
        getTotal () {
            const defaultParam = { year: this.year, indexCode: this.indexCode };
            let params;
            if (this.indexCode === 'zlzx' || this.indexCode === 'cm') {
                params = {
                    ...defaultParam,
                    code: ['cm'].includes(this.indexCode) ? this.code : null
                };
            }
            if (this.indexCode === 'jys' || this.indexCode === 'bzr') {
                params = { ...defaultParam, classRoomId: this.code };
            }
            if (this.indexCode === 'jxdw') {
                params = { ...defaultParam, orgId: this.code };
            }
            getTotalNum(params).then(async res => {
                const arr = ['jys', 'bzr'];
                const indexCode = this.indexCode;
                this.manageList = await [
                    {
                        name: '预警监控',
                        text: '预警总次数',
                        yjCount: `${res.warningNum}次`,
                        subText: '处理总次数',
                        clAllCount: `${res.handleWarningNum}次`
                    },
                    {
                        name: '进度监控',
                        text: '质控点达标率',
                        yjCount: `${res.pointStandardRate}%`,
                        subText: '质控点目标率',
                        clAllCount: `${res.pointTargetRate}%`
                    },
                    {
                        name: '诊改报告',
                        text: '诊改报告完成率',
                        yjCount: `${res.reportCompleteRate}%`,
                        subText: '诊改报告审核率',
                        clAllCount: `${res.reportAuditRate}%`
                    },
                    {
                        name: '模板管理',
                        text: ['jxdw'].concat(arr).includes(indexCode)
                            ? ''
                            : '未编辑模板数量',
                        yjCount: ['jxdw'].concat(arr).includes(indexCode)
                            ? ''
                            : `${res.noEditTemplateNum}个`,
                        subText: ['jxdw'].concat(arr).includes(indexCode)
                            ? ''
                            : '已下发模板数量',
                        clAllCount: ['jxdw'].concat(arr).includes(indexCode)
                            ? ''
                            : `${res.issueTemplateNum}个`
                    },
                    {
                        name: '标准管理',
                        text: ['jxdw'].concat(arr).includes(indexCode)
                            ? ''
                            : '已填标准质控点数',
                        yjCount: ['jxdw'].concat(arr).includes(indexCode)
                            ? ''
                            : `${res.standardNum}条`,
                        subText: ['jxdw'].concat(arr).includes(indexCode)
                            ? ''
                            : '未填标准质控点数',
                        clAllCount: ['jxdw'].concat(arr).includes(indexCode)
                            ? ''
                            : `${res.noStandardNum}条`
                    },
                    {
                        name: '数据采集',
                        text: arr.includes(indexCode)
                            ? ''
                            : '已完成采集数据条数',
                        yjCount: arr.includes(indexCode)
                            ? ''
                            : `${res.dataNum}条`,
                        subText: arr.includes(indexCode)
                            ? ''
                            : '未完成采集数据条数',
                        clAllCount: arr.includes(indexCode)
                            ? ''
                            : `${res.noDataNum}条`
                    }
                ];
                // eslint-disable-next-line no-unused-vars
                var mySwiper = new Swiper('.swiper-container', {
                    autoplay: false,
                    direction: 'horizontal', // 横向切换选项
                    loop: false, // 循环模式选项
                    observer: true,
                    grabCursor: true,
                    slidesPerView: 6,
                    spaceBetween: 30,
                    updateOnWindowResize: true,
                    // 如果需要分页器
                    /* pagination: {
                el: '.swiper-pagination',
                type: 'progressbar',
                progressbarOpposite: true
            }, */

                    // 如果需要前进后退按钮
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev'
                    },

                    // 如果需要滚动条
                    scrollbar: {
                        el: '.swiper-scrollbar',
                        hide: true,
                        dragSize: 80
                    }
                });
                this.imgSrc = require('../../assets/images/circle.png');
            });
        },
        // 管理类型
        handleManage (item) {
            if (
                this.indexCode === 'jxdw' &&
                ['模板管理', '标准管理'].includes(item.name)
            ) {
                return;
            }
            if (
                ['bzr', 'jys'].includes(this.indexCode) &&
                ['模板管理', '标准管理', '数据采集'].includes(item.name)
            ) {
                return;
            }
            this.dialogVisible = true;
            console.log(item, 'handleManage');
            if (item.name === '预警监控') {
                this.dialogTitle = '质控点预警及处理情况';
            } else if (item.name === '进度监控') {
                this.dialogTitle = '执行进度分析';
                // this.$refs.dialogRef.getTableData('init');
            } else if (item.name === '模板管理') {
                this.dialogTitle = '目标标准模板维护情况';
            } else if (item.name === '标准管理') {
                this.dialogTitle = '质控点标准值维护情况';
            } else if (item.name === '数据采集') {
                this.dialogTitle = '质控点执行状态采集情况';
            } else {
                this.dialogTitle = item.name;
            }
            this.$refs.dialogRef.initEcharts();
        },
        closeDialog () {
            this.dialogVisible = false;
        }
    }
};
</script>
<style lang="scss">
.el-cascader__dropdown,
.el-popper[x-placement^="bottom"] {
    background: rgb(0, 19, 43) !important;
}
.pop-select {
    background: #00132b;
    // .el-radio__inner{
    //     display: none !important;
    // }
    .el-picker-panel__icon-btn {
        color: #fff;
        &:hover {
            color: #409eff;
        }
    }
}
@import "../../assets/css/reset.scss";
</style>
<style lang="scss" scoped>
@font-face {
    font-family: electronicFont;
    src: url("../../assets/fonts/DS-DIGIT.TTF");
}
::v-deep .el-cascader,
::v-deep .el-date-editor {
    width: 246px;
    position: relative;
    .el-input,
    .el-input--small .el-input__inner {
        position: relative;
        &::after,
        &::before {
            content: "";
            width: 8px;
            height: 8px;
            position: absolute;
            bottom: 0;
            border-bottom: 1px solid #4985c5;
        }
        &::after {
            right: 0;
            border-right: 1px solid #4985c5;
        }
        &::before {
            left: 0;
            border-left: 1px solid #4985c5;
        }
    }
    &::after,
    &::before {
        content: "";
        width: 8px;
        height: 8px;
        position: absolute;
        top: 0;
        border-top: 1px solid #4985c5;
    }
    &::after {
        right: 0;
        border-right: 1px solid #4985c5;
    }
    &::before {
        left: 0;
        border-left: 1px solid #4985c5;
    }
}
::v-deep .el-input--small .el-input__inner {
    height: 40px;
}
::v-deep .el-input__inner {
    height: 40px;
    background: rgba(0, 39, 90, 0.5);
    border-radius: 0;
    border: none;
    color: #fff;
    font-size: 16px;
    letter-spacing: 2px;
}
.picker {
    position: relative;
    display: inline-block;
    &::after,
    &::before {
        content: "";
        width: 8px;
        height: 8px;
        position: absolute;
        bottom: 0;
        border-bottom: 1px solid #4985c5;
    }
    &::after {
        right: 0;
        border-right: 1px solid #4985c5;
    }
    &::before {
        left: 0;
        border-left: 1px solid #4985c5;
    }
}
::v-deep .el-input--small .el-input__icon {
    line-height: 40px;
    font-size: 18px;
}
::v-deep .el-icon-date:before {
    color: #10609c;
}
.center {
    height: calc(100vh - 320px);
    width: calc(100vw-30px);
    // border: 1px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .circle {
        width: 1220px;
        height: 1220px;
        text-align: center;
        position: relative;
        top: 65px;
        border-radius: 50%;
        border: 10px dashed #0d7be9;
        animation: changeright 20s linear infinite;
    }
    @keyframes changeright {
        0% {
            transform: rotateX(110deg) rotateZ(360deg);
        }

        50% {
            transform: rotateX(110deg) rotateZ(180deg);
        }

        100% {
            transform: rotateX(110deg) rotateZ(0deg);
        }
    }
    .circle-center {
        position: absolute;
        div {
            background: url("../../assets/images/center.png") no-repeat center;
            background-size: contain;
            width: 1000px;
            height: 500px;
            span {
                color: #fff;
                text-shadow: #fff;
                padding-bottom: 130px;
                width: 170px;
                text-align: center;
                font-size: 35px;
                font-weight: bold;
            }
        }
    }
    .item {
        color: #fff;
        position: absolute;
        text-align: left;
        width: 300px;
        cursor: pointer;
        .item-t {
            padding-left: 80px;
            height: 105px;
            span,
            div {
                font-size: 15px;
                color: #00f0ff;
                letter-spacing: 2px;
                &:nth-child(3),
                &:nth-child(4) {
                    color: #00ff00;
                }
            }
            div,
            canvas {
                font-family: "electronicFont";
                letter-spacing: 4px;
            }
        }
        .item-b {
            background: url("../../assets/images/warning.png") no-repeat center;
            background-size: 100% !important;
            width: 79%;
            height: 145px;
            position: relative;
            p {
                position: absolute;
                left: 50%;
                bottom: 30px;
                transform: translateX(-50%);
                font-size: 15px;
                color: #00f0ff;
            }
        }
    }
    .item-0 {
        top: 25%;
        right: 6%;
    }
    .item-1 {
        bottom: -2%;
        right: 25%;
        .item-b {
            background: url("../../assets/images/progress-monitoring1.png")
                no-repeat center;
            height: 158px;
            p {
                bottom: 30px;
            }
        }
    }
    .item-2 {
        bottom: -4%;
        left: 30%;
        .item-b {
            background: url("../../assets/images/clinic-report.png") no-repeat;
            p {
                bottom: 38px;
            }
        }
    }
    .item-3 {
        top: 22%;
        left: 10%;
        // transition: all .5s linear;
        .item-b {
            margin-top: 0;
            background: url("../../assets/images/template-manage.png") no-repeat;
            p {
                bottom: 15px;
            }
        }
    }
    .item-4 {
        top: -1%;
        left: 30%;
        // transition: all .5s linear;
        .item-b {
            background: url("../../assets/images/normal-manage.png") no-repeat;
            p {
                bottom: 45px;
            }
        }
    }
    .item-5 {
        top: -5%;
        right: 28%;
        // transition: all .5s linear;
        .item-b {
            background: url("../../assets/images/data-collect.png") no-repeat;
        }
    }
}
.swiper {
    // border: 1px solid;
    padding: 0 70px 0 85px;
    .swiper-slide {
        height: 120px !important;
        max-width: 260px;
        font-size: 16px;
        color: #aeebff;
        &:first-child {
            margin-left: 10px;
        }
        .item-l {
            position: relative;
            flex-basis: 50%;
            img,
            span {
                width: 130px;
                position: absolute;
                z-index: 1;
                top: 10px;
                left: 20px;
                padding-left: 10px;
            }
            span {
                text-align: center;
                padding-left: 3px;
                padding-top: 25px;
            }
        }
        .item-r {
            // justify-content: flex-end;
            padding-top: 30px;
            div {
                text-align: left;
            }
            .item-r-t {
                font-size: 38px;
                font-weight: bold;
                color: #00eaff;
            }
            .item-r-b {
                color: #00a8ff;
            }
        }
    }
}

::v-deep .el-dialog,
::v-deep .el-dialog__header {
    &::after,
    &::before {
        content: "";
        width: 8px;
        height: 8px;
        position: absolute;
        bottom: 0px;
        border-bottom: 1px solid #4985c5;
        border-left: 1px solid #4985c5;
    }

    &::after {
        right: 0px;
        border-left: 0px;
        border-left: none;
        border-right: 1px solid #4985c5;
    }
}
::v-deep .el-dialog {
    // border: 10px solid;
    // border-image: linear-gradient(to right, rgb(0, 120, 243), rgba(87, 138, 239,1)) 1;

    // &::before {
    //     left: -10px;
    // }

    background: rgba(9, 27, 70, 0.9);
    .el-dialog__header {
        background: none;
        &::before {
            top: 0px;
            left: 0px;
            border-bottom: none;
            border-top: 1px solid #4985c5;
        }

        &::after {
            top: 0px;
            right: 0px;
            border-bottom: none;
            border-left: none;
            border-top: 1px solid #4985c5;
        }

        .el-dialog__headerbtn {
            top: 14px;
        }

        .el-dialog__title {
            font-size: 16px;
            font-weight: 600;
        }
    }

    // .el-dialog__body {
    //     background: $dialogDark;
    // }

    .el-dialog__footer {
        text-align: center;
    }
}
.pt-10 {
    padding-top: 10px !important;
}
</style>
